<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-18 14:23:47
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-05-19 13:51:58
 * @FilePath: \nien-vue3-admin\src\views\finance\FinancialManagementTools\accountMaintain\index.vue
 * @Description: 新增\编辑弹窗
-->
<template>
  <el-dialog
    v-model="visible" 
    :before-close="cancel"
    :title="`${title}汇率转换标`"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px" 
    >
      <el-form-item label="转换前币种" prop="beforeCurrency">
        <el-input v-model="formData.beforeCurrency" placeholder="请输入转换前币种"></el-input>
      </el-form-item>
      <el-form-item label="转换后币种" prop="afterCurrency">
        <el-input v-model="formData.afterCurrency" placeholder="请输入转换后币种"></el-input>
      </el-form-item>
      <el-form-item label="汇率" prop="exchangeRate">
        <el-input v-model.number="formData.exchangeRate" placeholder="请输入汇率"></el-input>
      </el-form-item>
      <el-form-item label="生效时间" prop="startDate">
        <el-date-picker
          v-model="formData.startDate"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="失效时间" prop="endDate">
        <el-date-picker
          v-model="formData.endDate"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" :loading="confirmLoading" @click="confirm">确定</el-button>
        <el-button type="info" :loading="confirmLoading" @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, getCurrentInstance, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { exchangeInsert as insert, 
  exchangeUpdate as update,
} from '@/api/finance/FinancialManagementTools'

const {
  appContext: {
    config: {
      globalProperties: { $validateForm },
    },
  },
} = getCurrentInstance()

const dicts = useDicts()
dicts.setDicts(DictDirection.是否禁用字典)

const emits = defineEmits(['success'])
const formRef = ref(null)
const confirmLoading = ref<boolean>(false)
const visible = ref<boolean>(false)
const title = ref<string>('')

const formData = ref({
  beforeCurrency: '',
  exchangeRate: '',
  startDate: '',
  endDate: '',
  afterCurrency: '',
  remark: '',
  id: '',
})
const rules = ref({
  beforeCurrency: [{ required: true, message: '请输入转换前币种', trigger: ['blur'] }],
  afterCurrency: [{ required: true, message: '请输入转换后币种', trigger: ['blur'] }],
  exchangeRate: [{ required: true, type: 'number', message: '请输入汇率', trigger: ['blur'] }],
})

const open = (t:string, row?:{id:string, [key:string]: any}) => {
  visible.value = true
  title.value = t
  formData.value.id = ''
  if (t === '修改') {
    const {
      id,
      beforeCurrency,
      exchangeRate,
      startDate,
      endDate,
      remark,
      afterCurrency,
    } = row
    nextTick(() => {
      // el-form渲染完成再赋值，resetFields是初始到渲染时的值
      Object.assign(formData.value, {
        id,
        beforeCurrency,
        exchangeRate,
        startDate,
        endDate,
        remark,
        afterCurrency,
      })
    })
  }
}
const api = () => (title.value === '修改' ? update : insert)

const confirm = () => {
  $validateForm(formRef.value, () => {
    confirmLoading.value = true
    api()(formData.value).then(res => {
      if (res.code === 200) {
        ElMessage.success(`${ title.value }成功！`)
        emits('success')
        cancel()
      }
    }).finally(() => {
      confirmLoading.value = false
    })
  })
}
const cancel = () => {
  formRef.value && formRef.value.resetFields()
  visible.value = false
}
defineExpose({
  open,
})
</script>